<template>
	<view>
		<view class="address-list">
			<u-icon name="map" size="26"></u-icon>
			<view class="address-cell" @tap="selectAddress()" v-if="!!address.id">
				<h5 class="name">{{address.name + address.id}} {{address.mobile}}</h5>
				<p class="address">{{address.province}}{{address.city}}{{address.county}}{{address.address}}</p>
				<span class="mui-icon mui-icon-arrowright"></span>
			</view>
			<view v-else>
				<view @click="selectAddress()">添加收货地址</view>
			</view>
		</view>

		<view v-if="shopList.length > 0" class="shop-list">
			<view class="item" v-for="(item, index) in goodsList" :key="index">
				
				<view class="left">
					<image :src="item.cover" mode="aspectFill"></image>
				</view>
				<view class="content">
					<view class="title u-line-2">{{ item.name }}</view>
					<view class="txt">
						<view class="price">
							￥{{ priceInt(item.price) }}<text class="decimal">.{{ priceDecimal(item.price) }}</text>
						</view>
						<view class="number">x{{ item.num }}</view>
					</view>
				</view>

			</view>
			<view class="total">
				合计:
				<text class="total-price">
					￥{{ priceInt(totalPrice(goodsList)) }}.<text class="decimal">{{ priceDecimal(totalPrice(goodsList)) }}</text>
				</text>
				<div class="text-title">优惠折扣</div>
				<div class="text-title">运费</div>
			</view>
			<view class="bottom">
				<u-button type="primary" shape="circle" @click="submit()">提交订单</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	import {checkOrder,sendOrder, getCart} from "@/api/api.js"
	import {mapState,mapGetters,mapMutations} from 'vuex';
	
	export default {
		data() {
			return {
				goodsList: [],
				address:{
					id:0,
				}
			}
		},
		onLoad(options) {
			if (options.addressid) {
				this.address.id = options.addressid;
			}
			this.getData();
		},
		onShow() {
			// console.log(this.shopList.length);
		},
		computed: {
			...mapState(['shopList']),
			// 价格小数
			priceDecimal() {
				return val => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return val => {
					if (val !== parseInt(val)) return val.split('.')[0];
					else return val;
				};
			}
		},
		methods: {
			...mapMutations(['setShopList']),
			
			
			// 总价
			totalPrice(item) {
				let price = 0;
				item.map(val => {
					price += parseFloat(val.price);
				});
				return price.toFixed(2);
			},
			// 总件数
			totalNum(item) {
				let num = 0;
				item.map(val => {
					num += val.number;
				});
				return num;
			},

			//提交订单
			async submit() {
				if (this.shopList.length < 1) {
					return;
				}
				uni.showLoading({
					title: '加载中...'
				});
				let data = {
					'shopList': JSON.stringify(this.shopList),
					'address_id': this.address.id,
					'paytype': 'wxpay',
				};
				console.log(data);
				await sendOrder(data).then((res) => {
					uni.hideLoading();
					console.log(res);
					this.goodsList = [];
					this.setShopList({ shopList: []});
					uni.redirectTo({
						url: "/pages/order/pay?id="+res.order_id
					})
				}).catch(() => {
					//uni.$u.toast(res.msg)

				})
			},
			
			async getData() {
				console.log("getData");
				if(this.shopList.length<1){
					uni.switchTab({
						url: "/pages/cart/cart"
					})
					return;
				}
				uni.showLoading({
					title: '加载中...'
				});
				let data = {
					'shopList': JSON.stringify(this.shopList),
					'address_id': this.address.id
				};
				await checkOrder(data).then((res) => {
					uni.hideLoading();
					console.log(res);
					// if(res.code=="4"){
					// 	console.log("4")
					// 	// uni.reLaunch({
					// 	// 	url: "/pages/login/login"
					// 	// })
					// }
					this.goodsList = res.cart;
					this.address = res.address;
				}).catch(() => {
					console.log("res");
				})
			},

			selectAddress() {
				uni.navigateTo({
					url: "/pages/address/selectAddress"
				})
			},

		}
	}
</script>

<style lang="scss">
	.address-list{
		display: flex;
		border-bottom: 16rpx solid #eee;
		padding: 20rpx;
		font-size: 30rpx;
		
		.address-cell{
			padding-left: 20rpx;
		}

		
		.name{
			font-size: 30rpx;
			
		}
	}
.shop-list {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				margin: 0 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.right {
			color: $u-warning-dark;
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
		border-bottom: 1rpx solid #eee;
		
		.left {
			margin-right: 20rpx;
			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			flex:1;
			
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}
			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}
			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}
		.txt {
			padding-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
		}
	}
	.bottom {
		display: flex;
		margin-top: 40rpx;
		padding: 0 10rpx;
		justify-content: space-between;
		align-items: center;
		.btn {
			line-height: 52rpx;
			width: 160rpx;
			border-radius: 26rpx;
			border: 2rpx solid $u-border-color;
			font-size: 26rpx;
			text-align: center;
			color: $u-info-dark;
		}
		.evaluate {
			color: $u-warning-dark;
			border-color: $u-warning-dark;
		}
	}
}
</style>